<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-01-02 22:30:29
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-01-03 23:43:48
 * @FilePath: \css_demos\web\CSS Houdini\水波球进度条.htm
 * @Description: 参考链接：https://codepen.io/Chokcoco/pen/XWYEGyz
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    @property --animation-tick {
      syntax: "<number>";
      inherits: false;
      initial-value: 10000;
    }
    @property --height {
      syntax: "<number>";
      inherits: false;
      initial-value: 0.7;
    }
    div {
      position: relative;
      width: 300px;
      height: 300px;
      background: paint(waveDraw);
      margin: auto;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-animation: move 200s infinite linear;
      animation: move 200s infinite linear;
      border-radius: 50%;
      border: 2px solid var(--color1);
      overflow: hidden;
      --amplitude: 15;
      --gap: 28;
      --animation-tick: 10000;
      --height: 0.7;
      --color1: rgba(255, 0, 0, 0.5);
      --color2: rgba(255, 0, 0, 0.4);
      --color3: rgba(255, 0, 0, 0.3);
      transition: --height 8s;
    }

    div:nth-child(2) {
      --amplitude: 6;
      --gap: 25;
      --animation-tick: 8000;
      --height: 0.5;
      --color1: rgba(28, 90, 199, 0.5);
      --color2: rgba(28, 90, 199, 0.4);
      --color3: rgba(28, 90, 199, 0.3);
    }

    div:nth-child(3) {
      --amplitude: 3;
      --gap: 30;
      --animation-tick: 5000;
      --height: 0.3;
      --color1: rgba(178, 120, 33, 0.5);
      --color2: rgba(178, 120, 33, 0.4);
      --color3: rgba(178, 120, 33, 0.3);
    }

    div:hover {
      --height: 0;
    }

    @-webkit-keyframes move {
      100% {
        --animation-tick: 0;
      }
    }

    @keyframes move {
      100% {
        --animation-tick: 0;
      }
    }
  </style>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
  <script>
    if (CSS.paintWorklet) {
      CSS.paintWorklet.addModule("./wave.js");
    }
  </script>
</html>
